<template>
    <view class="mine"></view>
</template>

<script>
export default {
    data() {
        return {
            barcode: null,
            flash: false,
            tip: '将二维码放入框中，即可自动扫描'
        };
    },
    onShow() {
        // 页面展示时，重新启动扫描检测
        if (this.barcode) {
            this.barcode.start();
        }
    },
    onLoad(params) {
        const { tip } = params;
        if (tip) {
            this.tip = tip;
        }
        // #ifdef APP-PLUS
        plus.navigator.setFullscreen(true); //全屏
        let currentWebview = this.$scope.$getAppWebview();
        this.createBarcode(currentWebview);
        this.createTipInfoView(currentWebview);
        this.createFlashBarView(currentWebview);
        // #endif
    },
    mounted() {},
    methods: {
        /**
         * 创建二维码
         * @param {Object} currentWebview
         */
        createBarcode(currentWebview) {
            if (!this.barcode) {
                this.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
                    top: `0px`,
                    left: '0px',
                    height: `100%`,
                    width: '100%',
                    position: 'absolute',
                    background: '#FFCC00',
                    frameColor: '#FFCC33',
                    scanbarColor: '#FFCC33'
                });
                this.barcode.onmarked = this.onmarked;
                this.barcode.setFlash(this.flash);
                //此处未演示扫码成功回调的地址设置，实际请参考HTML5Plus API自行处理
                //注意扫码区域需为正方形，否则影响扫码识别率
                currentWebview.append(this.barcode);
            }
            this.barcode.start();
        },

        /**
         * 创建提示信息
         * @param {Object} currentWebview
         */
        createTipInfoView(currentWebview) {
            const content = new plus.nativeObj.View(
                'content',
                {
                    top: '0px',
                    left: '0px',
                    height: '100%',
                    width: '100%'
                },
                [
                    {
                        tag: 'font',
                        id: 'scanTips',
                        text: this.tip,
                        textStyles: {
                            size: '14px',
                            color: '#ffffff',
                            whiteSpace: 'normal'
                        },
                        position: {
                            top: '90px',
                            left: '10%',
                            width: '80%',
                            height: 'wrap_content'
                        }
                    }
                ]
            );
            currentWebview.append(content);
        },
        // 创建 开关灯按钮
        createFlashBarView(currentWebview) {
            const openImg = this.crtFlashImg('static/yellow-scanBar.png');
            const closeImg = this.crtFlashImg('static/scanBar.png');
            const scanBarVew = new plus.nativeObj.View(
                'scanBarVew',
                {
                    top: '65%',
                    left: '40%',
                    height: '10%',
                    width: '20%'
                },
                closeImg
            );
            scanBarVew.interceptTouchEvent(true);

            currentWebview.append(scanBarVew);

            scanBarVew.addEventListener(
                'click',
                e => {
                    //点亮手电筒
                    this.flash = !this.flash;
                    if (this.flash) {
                        scanBarVew.draw(openImg);
                    } else {
                        scanBarVew.draw(closeImg);
                    }
                    if (this.barcode) {
                        this.barcode.setFlash(this.flash);
                    }
                },
                false
            );
        },
        crtFlashImg(imgsrc) {
            return [
                {
                    tag: 'img',
                    id: 'scanBar',
                    src: imgsrc,
                    position: {
                        width: '28%',
                        left: '36%',
                        height: '30%'
                    }
                },
                {
                    tag: 'font',
                    id: 'font',
                    text: '轻触照亮',
                    textStyles: {
                        size: '10px',
                        color: '#ffffff'
                    },
                    position: {
                        width: '80%',
                        left: '10%'
                    }
                }
            ];
        },
        // 扫码成功回调
        onmarked(type, result) {
            console.log('条码类型：' + type);
            console.log('条码内容：' + result);
            // 业务代码
            // 核对扫描结果
            // 判断是否是正确的格式
            // 不正确则跳转到 错误页面
        }
    }
};
</script>

<style lang="scss" scoped>
.mine {
    height: calc(100vh);
    /* #ifdef H5 */
    height: calc(100vh - var(--window-top));
    /* #endif */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>
